<template>
  <div class="image-waterfall-all">
    <div class="left-image">
      <el-image :src="currentImage" class="el-left-image"   />
    </div>
    <Waterfall
      :imageData="imageData"
      :columnCount="2"
      :columnGap="30"
      :totalWidth="700"
      backgroundColor="#000"
      class="waterfall"
    />
  </div>
</template>

<script>
import Waterfall from "@/components/Waterfall";
import { search_image } from "@/api/ai";
export default {
  components: {
    Waterfall,
  },
  data() {
    return {
      imageData: [],
      currentImage: "",
    };
  },
  mounted() {
    this.search_image();
  },
  methods: {
    async search_image() {
      let message = this.$route.query.message;
      let res = await search_image({ query: message });
      this.imageData = res;
      this.currentImage = res.length ? res[0]["image_link"] : "";
      console.log(res, "???????");
    },
  },
};
</script>
<style scoped lang="scss">
.image-waterfall-all {
  display: grid;

  background: #000;
  grid-template-columns: repeat(10, 1fr);

  .left-image {
    display: flex;
    grid-column: span 7 / span 7;
    padding: 50px;
  }

  .el-left-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .waterfall {
    grid-column: span 3 / span 3;
  }
}
</style>